<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="citySearch.css">
</head>
<body>
<div class="wrap">
    <div class="CurrencyCity">
        <img src="img/toplogo.png"/>
        <span>当前城市：北京市</span>
    </div>
    <div class="HotCity">
        <div class="HotCity-Left">热门城市：</div>
        <div class="HotCity-Right"><span>北京市</span><span>上海市</span> <span>广州市</span> <span>天津市</span> <span>重庆市</span> <span>杭州市</span></div>
    </div>
    <div class="SearchPart">
        <span class="ByProvince" id="ByPro"> 按省份</span>
        <span class="ByCity" id="ByCit"> 按城市</span>
        <input placeholder="请输入城市名" id="searchInput"/><img src="img/search.png" id="searchImg"/>
    </div>
    <div class="Search-Words-Box">
        <ul id="Search-Words-Ul">

        </ul>
    </div>
    <div id="Search-List">

    </div>
</div>


<script>
    var xhr = new XMLHttpRequest();
       xhr.open('GET','../../cage/cityList.json',true);
        xhr.responseType = 'json';
        xhr.onreadystatechange = function () {
            //通信成功时，状态值为4.
            if(xhr.readyState !==4 || xhr.status !== 200) {
                return;
            }
            var list = xhr.response.data;
            list.sort((a, b) => a.letter.charCodeAt(0) - b.letter.charCodeAt(0));
            getCity(list);
            var lastLetter = letterList.sort();
            getCityBox(lastLetter);
            getCityList(list);
            onMyLoad();
        };
        xhr.send();



    var searchWordsUl = document.getElementById("Search-Words-Ul");
    var letterList = [];
    var searchWordsLi = searchWordsUl.getElementsByTagName("li");
    var  searchList = document.getElementById("Search-List");
    var searchSpan = searchList.getElementsByTagName("span");


    // 字母渲染
    function getCity(data){
       data.forEach(function(i){
           c = i.letter.charAt(0);
           if(letterList.indexOf(c) == -1){
               letterList.push(c);
           }
       });
       return letterList;
   }


     function getCityBox(data) {
     data.forEach(function (i) {
         li = document.createElement("li");
         li.innerText = i;
         searchWordsUl.appendChild(li);
     })
     }


        var spanHTML = "";
        var liHTML = "";
        function getCityList(data){
          data.forEach(function(i){
              div = document.createElement("div");
              searchList.appendChild(div);
              span = document.createElement("span");
              spanHTML = "<a>"+ (i.letter).charAt(0)+"</a>"+"&nbsp;&nbsp;" +"<b>"+ i.name + "</b>";
              span.innerHTML = spanHTML;
              div.appendChild(span);
              divRight = document.createElement("div");
              div.appendChild(divRight);
              cityUl = document.createElement("ul");
              divRight.appendChild(cityUl);

              (function(j){
                  (j.city).forEach(function(j){
                      li = document.createElement("li");
                      liHTML = j.name;
                      li.innerHTML = liHTML;
                      cityUl.appendChild(li);
                  });
              })(i)
            });
        }

    var ByPro = document.getElementById("ByPro");
    var ByCit = document.getElementById("ByCit");
    var searchInput = document.getElementById("searchInput");
    var searchImg = document.getElementById("searchImg");
    var ulList = searchList.getElementsByTagName("ul");

    var flag = 0;
    ByPro.onclick = function (){
        flag = false;
    };
    ByCit.onclick = function(){
        flag = true;
    };          // 原数据写的flag=1; else flag=0,报错；


    searchImg.onclick=function() {
             var arr = searchInput.value;
             if (flag ) {
                 for (i = 0; i < ulList.length; i++) {
                     ulList[i].parentNode.parentNode.style.display = "none";
                     if (ulList[i].innerText.indexOf(arr) !== -1) {
                         ulList[i].parentNode.parentNode.style.display = "block";
                     }
                 }
             } else {
                 {
                     for (i = 0; i < searchSpan.length; i++) {
                         searchSpan[i].parentNode.style.display = "none";
                         if (searchSpan[i].innerText.indexOf(arr) !== -1) {
                             searchSpan[i].parentNode.style.display = "block";
                         }
                     }
                 }

             }
         };

    function onMyLoad(){
        for(var i = 0; i < searchWordsLi.length; i++){
            searchWordsLi[i].index = i;
            searchWordsLi[i].onclick = function () {
                var trr = searchWordsLi[this.index].innerText;
                for (j = 0; j < searchSpan.length; j++) {
                    searchSpan[j].parentNode.style.display = "none";
                    if (searchSpan[j].childNodes[0].innerText.indexOf(trr) !== -1) {
                        searchSpan[j].parentNode.style.display = "block";
                    }
                }
            }
        }
    }





</script>
</body>
</html>